<template>
	<view class="case">
		<u-navbar>
			<view class="slot-wrap">
				<u-search
					placeholder="店铺名称/商品id/活动id"
					v-model="searchipt"
					:height="50"
					action-text="搜索"
					:input-style="{
						height: '56rpx'
					}"
					:action-style="{
						width: '118rpx',
						height: '56rpx',
						lineHeight: '56rpx',
						backgroundColor: '#FFDB28',
						borderRadius: '10rpx',
						color: '#ffffff'
					}"
					@search="doSearch"
					@custom="doSearch"
				></u-search>
			</view>
		</u-navbar>
		<view class="navbar">
			<view class="nav"><u-subsection :list="list" :current="current" bgColor="#ffffff" @change="subchange" active-color="black" button-color="#F4F4F4"></u-subsection></view>
			<u-dropdown :close-on-click-mask="mask" ref="uDropdown" :height="70" activeColor="#292930" @open="openclass" :class="current == 2 ? 'active' : ''">
				<u-dropdown-item :title="title" :isweight="600">
					<view class="slot-content">
						<view class="item-box">
							<view class="item" v-for="(item, index) in classlist" :key="index" :class="[item.active ? 'active' : '']" @tap="tagClick(index, item.id)">
								{{ item.name }}
							</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<view
				:animation="animationData"
				style="width: 244rpx;background-color: rgb(244, 244, 244);height: 58rpx;border-radius: 10rpx;margin-top: 6rpx;position: absolute;right: 252rpx;"
			></view>
		</view>
		<view class="goodsbox" v-if="goodsList.length > 0">
			<view class="order" v-for="(res, index) in goodsList" :key="res.id">
				<view class="top">
					<view class="left">
						<view class="store">{{ res.shopTitle }}</view>
					</view>
					<view class="right">
						<text
							:style="{
								color: '#999999',
								fontSize: '24rpx'
							}"
						>
							{{ res.startTime }} 至 {{ res.endTime }}
						</text>
					</view>
				</view>
				<view class="item">
					<view class="left">
						<image :src="res.pictUrl" mode="aspectFill"></image>
						<view class="lose" v-if="res.new != '0'">
							<view class="" style="width: 100%;">被翘</view>
							<view class="" style="width: 100%;">{{ res.new }}%</view>
						</view>
					</view>
					<view class="content">
						<view class="title u-line-1">{{ res.title }}</view>
						<view class="type u-flex u-row-between">
							<text>{{ res.itemId }}</text>
							<text>活动 {{ res.eventId }}</text>
						</view>
						<view class="type u-flex u-row-between">
							<text>销量 {{ res.biz30day }}</text>
							<view class="price_right">
								<view class="cominfo u-m-r-8">
									佣金
									<text class="numinfo">{{ res.commissionRate }}</text>
									%
								</view>
								<view class="cominfo">
									服务费
									<text class="numinfo">{{ res.serviceRate }}</text>
									%
								</view>
							</view>
						</view>
						<view class="price">
							<view class="price_left">
								<view class="oldprice u-m-r-8">{{ res.zkFinalPrice }}</view>
								￥{{ res.couponZkFinalPrice }}
							</view>
							<view class="price_right">
								<view class="cominfo">
									预估 ￥
									<text class="numinfo u-font-16">{{ res.is_alipayFee == null ? 0 : parseFloat(res.is_alipayFee).toFixed(2) }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" :margin-top="40" :margin-bottom="0" bg-color="transparent" />
		</view>
		<u-empty text="Sorry!暂无通过商品!" mode="search" v-else :margin-top="60"></u-empty>
		<u-back-top :scroll-top="scrollTop" :top="600"></u-back-top>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'haha',
	data() {
		return {
			page: 1,
			max_page: 1,
			status: 'loadmore',
			animationData: {},
			scrollTop: 0,
			title: '昨天到期	',
			current: 0,
			searchipt: '',
			xuhao: '',
			iconname: 'thumb-up', //thumb-up-fill
			list: [
				{
					name: '全部商品'
				},
				{
					name: '被翘商品'
				}
			],
			mask: true,
			classlist: [
				{
					active: true,
					name: '昨天到期',
					id: 1
				},
				{
					active: false,
					name: '今天到期',
					id: 2
				},
				{
					active: false,
					name: '明天到期',
					id: 3
				},
				{
					active: false,
					name: '七天到期',
					id: 4
				}
			],
			activeColor: '#2979ff',
			goodsList: []
		};
	},
	onShow: function() {
		var animation = uni.createAnimation({
			duration: 1000,
			timingFunction: 'ease'
		});

		this.animation = animation;

		// animation
		// 	.scale(2, 2)
		// 	.rotate(45)
		// 	.step();

		// this.animationData = animation.export();

		// setTimeout(
		// 	function() {
		// 		animation.translate(30).step();
		// 		this.animationData = animation.export();
		// 	}.bind(this),
		// 	1000
		// );
	},
	//实例创建完成后被立即调用
	created() {},
	watch: {
		searchipt: function(val) {
			if (val == '') {
				this.getadoptgoods();
			}
		}
	},
	onLoad(option) {
		this.getadoptgoods();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = ++this.page;
		if (this.max_page < this.page || this.max_page == this.page) {
			this.status = 'nomore';
			return false;
		}

		this.getadoptgoods(this.current, this.xuhao, this.searchipt, parseInt(this.page));
	},
	//挂载开始之前被调用
	beforeMount() {},
	// onPullDownRefresh() {
	// 	//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// 	this.classlist = [
	// 		{
	// 			active: true,
	// 			name: '分类',
	// 			xuhao: -1
	// 		}
	// 	];
	// 	this.getcaselist(1);
	// 	setTimeout(()=> {
	// 		this.$refs.uToast.show({
	// 			title: '刷新成功!',
	// 			type: 'success'
	// 		});
	// 		uni.stopPullDownRefresh(); //停止下拉刷新动画
	// 	}, 1000);
	// },
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//前台进入后台
	onHide() {},
	methods: {
		goright: function() {
			// #ifdef APP-PLUS
			this.animation.translate(150, 0).step({ duration: 350 });
			// #endif
			// #ifndef APP-PLUS
			this.animation.translate(123, 0).step({ duration: 350 });
			// #endif
			this.animationData = this.animation.export();
		},
		goleft: function() {
			this.animation.translate(-122, 0).step({ duration: 1000 });
			this.animationData = this.animation.export();
		},
		getadoptgoods(type, time, searchipt, page) {
			this.$u.api
				.getadoptgoods({
					type: type == undefined ? '' : type, //2=正常，1=被翘
					is_time: time == undefined ? '' : time, //1=昨天到期，2=今天到期，3=明天到期，4=七天内到期
					search: searchipt == undefined ? '' : searchipt,
					page: page == undefined ? 1 : page,
					pagesize: 15
					// start_time:start_time, //= 开始时间，
					// end_time:end_time,// = 结束时间
					// sort_type:sort_type  //排序1= 最新通过，2=预估服务费降序
				})
				.then(res => {
					console.log(res);
					this.max_page = res.data.data.max_page;
					this.goodsList.push(...res.data.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		gocasseinfo(item) {
			uni.navigateTo({
				url: '/pages/case/caseinfo?item=' + encodeURIComponent(JSON.stringify(item))
			});
		},
		tagClick(index, id) {
			// console.log(index, id);
			this.xuhao = id;
			this.classlist[index].active = !this.classlist[index].active;
			for (let i in this.classlist) {
				if (i == index) {
					this.classlist[i].active = true;
					this.title = this.classlist[i].name;
					this.closeDropdown();
					// console.log('this.current', this.current);
					this.goodsList=[]
					this.getadoptgoods('', id, '');
					this.current = 2;
					this.goright();
				} else {
					this.classlist[i].active = false;
				}
			}
		},
		openclass(index) {
			console.log(index);
			// this.current = 5;
		},
		closeDropdown() {
			this.$refs.uDropdown.close();
		},
		doSearch() {
			// console.log(this.searchipt);
			this.goodsList = [];
			this.getadoptgoods('', '', this.searchipt);
		},
		subchange(index) {
			// console.log(index);
			this.goleft();
			this.current = index;
			this.$refs.uDropdown.close();
			this.goodsList = [];
			this.getadoptgoods(this.current, '', '');
		}
	}
};
</script>

<style lang="scss" scoped>
.case {
	background-color: $lt-bg;
	min-height: 100vh;
	.slot-wrap::v-deep {
		display: flex;
		align-items: center;
		flex: 1;
		padding-right: 20rpx;
		.u-content{
			height: 56rpx!important;
		}
	}
	.slot-content {
		background-color: #ffffff;
		padding: 0 24rpx 24rpx 24rpx;

		.item-box {
			// margin-bottom: 50rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			font-size: 28rpx;

			.item {
				// border: 1px solid $u-type-primary;
				color: #101010;
				// padding: 8rpx 20rpx;
				width: 328rpx;
				height: 62rpx;
				line-height: 62rpx;
				border-radius: 12rpx;
				margin-top: 30rpx;
				background-color: #f7f7f7;
				text-align: center;
				border: 2rpx solid transparent;
			}

			.active {
				// color: #292930;
				border: 2rpx solid #bbbbbb;
				// background-color: $u-type-primary;
			}
		}
	}
	.navbar::v-deep {
		height: 70rpx;
		background-color: #ffffff;
		.nav {
			width: 500rpx;
			position: absolute;
			// top: var(--status-bar-height) + 44;
			left: 0;
			z-index: 900;
		}
		.u-dropdown {
			width: 244rpx;
			float: right;
		}
		.u-dropdown__menu__item {
			justify-content: flex-end;
			/* #ifdef APP-PLUS */
			padding-right: 88rpx;
			/* #endif */
			/* #ifndef APP-PLUS */

			padding-right: 66rpx;
			/* #endif */
		}
		.u-dropdown__menu__item__arrow {
			display: none;
		}
		.active {
			.u-dropdown__menu__item__text {
				font-weight: 600;
				color: black !important;
			}
		}
		.u-dropdown__content {
			height: calc(100% - 158rpx);
		}
	}
	.goodsbox {
		.order {
			width: 672rpx;
			background-color: #ffffff;
			margin: 24rpx auto;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 20rpx;
			font-size: 28rpx;
			// padding-bottom: 80rpx;

			.top {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.store {
						margin: 0 10rpx;
						font-size: 28rpx;
						font-weight: bold;
					}
				}

				.right {
					color: $u-type-warning-dark;
				}
			}

			.item {
				display: flex;
				margin: 18rpx 0 0;
				position: relative;
				.left {
					margin-right: 20rpx;
					height: 150rpx;

					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 12rpx;
					}
					.lose {
						width: 150rpx;
						height: 150rpx;
						border-radius: 12rpx;
						background-color: rgba(255, 255, 255, 0.5);
						position: absolute;
						top: 0;
						left: 0;
						text-align: center;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;
						align-items: center;
						font-size: 40rpx;
						font-weight: 600;
						color: red;
					}
				}

				.content {
					.title {
						width: 436rpx;
						font-size: 28rpx;
						// line-height: 50rpx;
					}

					.type {
						margin: 4rpx 0;
						font-size: 24rpx;
						color: $u-tips-color;

						.price_right {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							// width: 260rpx;
							.cominfo {
								color: rgba(153, 153, 153, 1);

								.numinfo {
									color: #333333;
								}
							}
						}
					}

					.price {
						font-size: 24rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.oldprice {
							text-decoration: line-through;
							color: rgba(153, 153, 153, 1);
						}

						.price_left {
							display: flex;
							justify-content: flex-start;
							align-items: center;
						}

						.price_right {
							display: flex;
							justify-content: flex-start;
							align-items: center;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							// width: 260rpx;
							.cominfo {
								color: rgba(153, 153, 153, 1);

								.numinfo {
									color: #333333;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
